{% extends 'layout/base.html' %}
{% load static %}

{% block title %} 用户登录 {% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'web/css/account.css' %}" type="text/css"/>
<style>
 .error-msg {
     color: red;
     position: absolute;
     font-size: 12px;
 }
</style>
{% endblock %}

{% block content %}
<div class="account">
    <h2 style="text-align:center; margin-bottom:25px">用户登录</h2>
    <form method="POST" action="/login/" class="form" novalidate>
        {% csrf_token %}
        {% for field in form %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {% if field.name == 'code' %}
            <div class="row">
                <div class="col-xs-8">
                    {{ field }}
                    <span class="error-msg">{{ field.errors.0 }}</span>
                </div>

                <div class="col-xs-4">
                    <img src="{% url 'auth_code_image' %}" id="imgAuthCode" title="点击更换图片" />
                </div>
            </div>
            {% else %}
            <div>
                {{ field }}
                <span class="error-msg">{{ field.errors.0 }}</span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
        <div>
            <div style="float: right;">
                <a href="{% url 'login_email' %}">邮箱验证码登录?</a>
            </div>
        </div>

        <!-- input 按钮在浏览器缩放不等于100%时可能位置不正确，尤其是 110% 缩放时  -->
        <div class="row">
            <div class="col-xs-3">
                <input id="btnLogin" type="submit" value="登 录" class="btn btn-primary">
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block js %}
<script>
 $(function () {
     $('#imgAuthCode').click(function () {
         var originSrc = $(this).attr('src');
         $(this).attr('src', originSrc + "?");
     })
 })
</script>
{% endblock js %}
